var TableDealerSelect = function () {
  var template = /* html */ `
    <el-select v-if="dealers!==null" filterable class="table-dealer-select" v-model="provider" :size="size" value-key="dataId" @visible-change="visibleChange"
      @change="providerChange">
      <el-option disabled v-if="order.otherProviderOption" :value="order.otherProviderOption" :label="order.otherProviderOption.name">
        <span style="float:left;margin-right:10px;">{{order.otherProviderOption.name}}</span>
        <span style="float:right;color:#8492a6;">公司</span>
      </el-option>
      <el-option v-for="dealer in dealers" :key="'dealer_'+dealer.dataId" :value="dealer" :label="dealer.name">
        <span style="float:left;margin-right:10px;">{{dealer.name}}</span>
        <span style="float:right;color:#8492a6;">{{dealer.sourceText}}</span>
      </el-option>
    </el-select>
  `;

  return {
    props: {
      value: {
        type: [Number, Object, String],
        required: true
      },
      order: {
        type: Object,
        required: true
      },
      dealerList: {
        type: Array,
        required: true
      },
      dealerObj: {
        type: Object,
        required: true
      },
      size: {
        type: String,
        default: 'mini'
      }
    },

    watch: {
      dealerList: function () {
        this.dealers = this.getInitDealers();
      },

      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.provider = this.value;
      }
    },

    data: function () {
      return {
        provider: this.value,
        inputValue: null,
        dealers: null
      };
    },

    created: function () {
      this.dealers = this.getInitDealers();
    },

    methods: {
      visibleChange: function (isShow) {
        if (isShow) {
          this.dealers = this.dealerList;
        } else {
          this.dealers = this.getInitDealers();
        }
      },

      getInitDealers: function () {
        var dealerObj = this.dealerObj;
        if (SysUtil.isEmpty(dealerObj)) {
          return [];
        }

        var provider = this.value;
        var dataId = provider.dataId;
        provider = dealerObj[dataId];
        if (provider === undefined) {
          return [];
        }
        return [provider];
      },

      providerChange: function () {
        var provider = this.provider;
        this.inputValue = provider;
        this.$emit('input', provider);
        this.$emit('change', provider);
      }
    },

    template: template
  };
}();
